<template>
  <div class="person-info-container">
    <card-container height="628px"  key="container3"  style="margin-top: 16px;" title="用户信息">
      <div class="person-content">
        <div class="header-avatar-box">
          <span>头像：</span>
          <div class="img-box">
            <img :src="userAvatar || ''" alt="">
          </div>
        </div>
        <div>
          <p><span>昵称：</span>{{nickName || '暂无'}}</p>
        </div>
        <div>
          <p><span>性别：</span>{{genderInfo}}</p>
        </div>
        <div>
          <p><span>生日：</span>暂无</p>
        </div>
        <div>
          <p><span>签名：</span>{{signature || '暂无'}}</p>
        </div>
        <div>
          <p><span>微信：</span>{{wxNumber || '暂无'}}</p>
        </div>
        <div>
          <p><span>QQ号：</span>{{qqNumber || '暂无'}}</p>
        </div>
        <div>
          <p><span>手机号：</span>{{mobile || '暂无'}}</p>
        </div>
      </div>
    </card-container>
  </div>
</template>


<script>
import ProjectCard from '../../../components/pc/projectCard';
import CardContainer from '../../../components/pc/cardContainer';
import config from '../../../action/config';
import Pagination from "../../../components/pc/pagination";
import EmptyCard from "../../../components/pc/emptyCard";

export default {
  name:'info',
  components:{
    ProjectCard,CardContainer,Pagination,EmptyCard
  },
  async asyncData({$axios, query}) {
    let infoResponse = await $axios.$get(config.api.get.User.otherInfo + query.user + '/baseinfo');
    console.log(infoResponse);
    return { ...infoResponse.data }
  },
  computed: {
    genderInfo: function () {
      if (this.gender === 1) {
        return '男'
      } else if (this.gender === 2) {
        return '女'
      } else {
        return '保密'
      }

    }
  }

}
</script>

<style lang="scss" scoped>
  .person-info-container{
    .person-content{
      padding-top: 40*$length;
      padding-left: 154*$length;
      > div {
        margin-bottom: 27*$length;
        @extend %flex-row-spb;
        justify-content: flex-start;
        p {
          @include fontStyle(14,19,500,#333,left);
        }
      }
      span {
        display: inline-block;
        width: 56*$length;
        margin-right: 16*$length;
        cursor: default;
        @include fontStyle(14,19,500,#999,right);
      }
      .header-avatar-box{
        .img-box{
          width: 90*$length;
          height: 90*$length;
          background-color: #F4F8FA;
          @include border-radius(50%);
          > img {
            width: 90*$length;
            height: 90*$length;
            object-fit: contain;
            @include border-radius(50%);
          }
        }
      }

    }
  }
</style>
